<template>
  <page-header title="常用观演人" background="#F7F0E6"></page-header>
  <view class="page-address-list">
    <view class="list-box">
      <empty-img v-if="Data.length == 0">
        <template #text>
          观演人空空的，去添加新成员吧~
        </template>
      </empty-img>
      <uni-card :is-shadow="false" margin="10px" padding="5px" v-else>
        <view class="item" v-for="(item, index) in Data" :key="item.id">
          <view class="text-box">
            <view class="name">
              {{ handleName(item.name) }}
            </view>
            <view class="card">
              <view class="type">{{ queryType(item.type)}}</view>
              <view class="id">{{ handleIdCard(item.idCard) }}</view>
            </view>
          </view>
          <uni-icons type="trash" size="20" color="#999" @tap="delViewer(item.id)"></uni-icons>
        </view>
      </uni-card>
    </view>
    <view class="new-address">
      <view class="btn" @tap="addViewer">
        新增观演人
      </view>
    </view>
  </view>
</template>

<script setup>
  import {
    ref
  } from 'vue';
  onShow(() => {
    getViewer()
  })
  const Data = ref([])

  const getViewer = () => {
    http.request({
      url: '/mall4cloud_user/app/idCard/list',
      method: 'GET'
    }).then(res => {
      Data.value = res
    })
  }

  const addViewer = () => {
    uni.navigateTo({
      url: '/pages/my-viewer-edit/my-viewer-edit'
    })
  }

  const delViewer = (id) => {
    uni.showModal({
      title: '提示',
      content: '确定要删除该信息吗？',
      success: modalRes => {
        if (modalRes.confirm) {
          // 删除该信息
          http.request({
            url: '/mall4cloud_user/app/idCard/delete',
            method: 'POST',
            data: {
              'id': id
            }
          }).then(res => {
            if (res) {
              uni.showToast({
                title: '删除成功',
                icon: 'none'
              })
              Data.value = Data.value.filter(item => {
                return item.id != id
              })
            } else {
              uni.showToast({
                title: '删除失败',
                icon: 'none'
              })
            }
          })
        }
      }
    })
  }

  const handleIdCard = (id) => {
    return id.slice(0, 3) + '********' + id.slice(16)
  }

  const queryType = (type) => {
    return ['', '身份证', '港澳台居民居住证', '港澳居民来往内地通行证', '台湾居民来往大陆通行证', '护照', '外国人永久居留身份证'][type]
  }

  const handleName = (name) => {
    return '*' + name.slice(1)
  }
</script>

<style lang="scss" scoped>
  .page-address-list {
    padding-bottom: env(safe-area-inset-bottom);

    .list-box {
      padding-bottom: 120rpx;
    }

    .list-box .item {
      display: flex;
      align-items: center;
      padding: 10rpx;
      background: #fff;
      position: relative;
      border-bottom: 2rpx dashed #f2f2f2;

      &:last-child {
        border-bottom: none;
      }
    }

    .list-box .item .text-box {
      flex: 1;
      margin-right: 20rpx;

      .name {
        font-weight: bold;
      }
    }

    .list-box .item .text-box .card {
      display: flex;
      align-items: center;
      margin-top: 10rpx;
      color: #999;

      .type {
        margin-right: 20rpx;
      }

      .id {
        letter-spacing: 1px;
      }
    }

    .new-address {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 20rpx 30rpx;
      height: 70rpx;
      line-height: 70rpx;

      .btn {
        color: #5b4523;
        font-size: 26rpx;
        font-weight: 600;
        text-align: center;
        background: #FDE9CE;
        border-radius: 70rpx;
      }
    }
  }
</style>
